<template>
  <div class="report-wrapper user-conversion">
    <div class="main-hd">
      <h2>{{ $t('m.yònghùshùjù') }}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <div class="search-con">
          <div class="items">
            <div class="label">{{$t('m.pst')}}</div>
            <DatePicker type="daterange" :value="userDataTimeDefault" format="yyyy-MM-dd" :options="repaymentDate" @on-change="userDataTimeChange" v-bind:placeholder="$t('m.pst')"></DatePicker>
          </div>

          <div style="margin:20px 0;">
            <Button class="parameter_button" style="margin-right:30px;" @click="recycleQuery()">{{$t('m.recycle')}}</Button>
            <Button class="parameter_button" type="primary" @click="userDataQuery">{{$t('m.cháxún')}}</Button>

            <Button type="primary" @click="exportData" style="float: right; margin: 4px;">
              <Icon type="ios-download-outline"></Icon> {{ $t('m.dǎochūshùjù') }}
            </Button>
          </div>
        </div>
        <div class="table-con">
          <h3 class="table-title">{{ $t('m.yònghùshùjùhuìzǒng') }}</h3>
          <Table border :columns="userDataListSumTable" :data="userDataListSum" :loading="utLoading"></Table>
        </div>
        <div class="table-con">
          <h3 class="table-title"> {{ $t('m.měirìyònghùxiángqíng') }}</h3>
          <Table border :columns="udColumns" :data="userDataList" :loading="udLoading" ref="table"></Table>
          <Page style="float: right;margin: 20px 0;" :total="userDataListSize" :current.sync="userDataPages" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="userDataCurrentChange" @on-page-size-change="userDataSizeChange"></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import excel from '@/static/excel'
export default {
  data () {
    return {
      repaymentDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      userDataTimeDefault: [],
      userDataListSum: [{}],
      userDataListSize: 1,
      userDataTimeStart: '',
      userDataTimeEnd: '',
      userDataList: [], // user transfer list
      userDataPageNumber: 1,
      userDataPageSize: 10,
      userDataPages: 1,
      utLoading: true,
      udLoading: true,
      userDataListSumTable: [
        {
          title: this.$t('m.dayTime'),
          key: 'currentDate',
          sortable: 'true',
          "align": 'center'
        },
        // {
        //   title: this.$t('m.xiàzàicìshù'),
        //   key: 'appDownloadCount',
        //   sortable: 'true',
        //   "align": 'center'
        // },
        {
          title: this.$t('m.zhùcèshù'),
          key: 'registerCount',
          sortable: 'true',
          "align": 'center'
        },
        {
          title: this.$t('m.shēnqǐngshù'),
          key: 'applyLoanCount',
          sortable: 'true',
          "align": 'center'
        },
        {
          title: this.$t('m.tōngguòshù'),
          key: 'applyLoanPassCount',
          sortable: 'true',
          "align": 'center'
        },
        {
          title: this.$t('m.fàngkuǎnshù'),
          key: 'paySuccessCount',
          sortable: 'true',
          "align": 'center'
        },
        // {
        //   title: this.$t('m.zhùcèshēnqǐnglǜ'),
        //   key: 'registerDownloadRate',
        //   sortable: 'true',
        //   "align": 'center'
        // },
        {
          title: this.$t('m.shēnqǐngtōngguòlǜ'),
          key: 'loanPassRate',
          sortable: 'true',
          "align": 'center'
        },
        {
          title: this.$t('m.tōngguòfàngkuǎnlǜ'),
          key: 'payPassRate',
          sortable: 'true',
          "align": 'center',
        },
        {
          title: this.$t('m.zhùcèfàngkuǎnlǜ'),
          key: 'registerPayRate',
          sortable: 'true',
          "align": 'center'
        }
      ],
      udColumns: [{
        title: this.$t('m.dayTime'),
        key: 'currentDate',
        sortable: 'true',
        "align": 'center'
      },
      // {
      //   title: this.$t('m.xiàzàicìshù'),
      //   key: 'appDownloadCount',
      //   sortable: 'true',
      //   "align": 'center'
      // },
      {
        title: this.$t('m.zhùcèshù'),
        key: 'registerCount',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.shēnqǐngshù'),
        key: 'applyLoanCount',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.tōngguòshù'),
        key: 'applyLoanPassCount',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.fàngkuǎnshù'),
        key: 'paySuccessCount',
        sortable: 'true',
        "align": 'center'
      },
      // {
      //   title: this.$t('m.zhùcèshēnqǐnglǜ'),
      //   key: 'registerDownloadRate',
      //   sortable: 'true',
      //   "align": 'center'
      // },
      {
        title: this.$t('m.shēnqǐngtōngguòlǜ'),
        key: 'loanPassRate',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.tōngguòfàngkuǎnlǜ'),
        sortable: 'payPassRate',
        "align": 'center',
        render: (h, params) => {
          return h('span', params.row.payPassRate)
        }
      },
      {
        title: this.$t('m.zhùcèfàngkuǎnlǜ'),
        key: 'registerPayRate',
        sortable: 'true',
        "align": 'center'
      }
      ],
    }
  },
  created () {
    this.userDataQuery()
  },
  watch: {
  },
  methods: {
    // 获取用户详情
    userDataQuery () {
      let param = {},
        query = '';
      param.applyDateBegin = this.userDataTimeStart,
        param.applyDateEnd = this.userDataTimeEnd,
        param.pageNumber = this.userDataPageNumber,
        param.pageSize = this.userDataPageSize,
        Object.keys(param).forEach((item, index) => {
          if (param[item]) {
            query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
          }
        });
      var url = `/api/laocai/report/user/info?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.userDataListSum = [res.body.result.statisticsCount]
          this.userDataListSum[0].currentDate = this.userDataTimeStart == '' ? this.$t('m.dàngtiān') : this.userDataTimeStart + '~' + this.userDataTimeEnd
          this.userDataList = res.body.result.dayCount.list
          this.userDataListSize = res.body.result.dayCount.size
          setTimeout(() => {
            this.utLoading = false
            this.udLoading = false
          }, 500);
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },

    recycleQuery () {
      this.userDataTimeDefault = []
      this.userDataTimeStart = '';
      this.userDataTimeEnd = '';
      this.userDataQuery()

    },
    // 选择时间
    userDataTimeChange (e) {
      if (!e[0]) {
        this.userDataTimeStart = '';
        this.userDataTimeEnd = '';
      } else {
        this.userDataTimeStart = e[0];
        this.userDataTimeEnd = e[1];
      }
      this.userDataPageNumber = 1
      this.userDataPageSize = 10
      this.udLoading = true;
    },
    // 页码改变的回调，返回改变后的页码
    userDataCurrentChange (val) {
      this.udLoading = true;
      this.userDataPageNumber = val;
      this.userDataQuery();
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    userDataSizeChange (val) {
      this.udLoading = true;
      this.userDataPageSize = val;
      this.userDataQuery();
    },
    // 导出用户数据汇总Excel
    exportData (type) {
      if (this.userDataList.length) {
        const params = {
          title: [
            this.$t('m.dayTime'),
            this.$t('m.xiàzàicìshù'),
            this.$t('m.zhùcèshù'),
            this.$t('m.shēnqǐngshù'),
            this.$t('m.tōngguòshù'),
            this.$t('m.fàngkuǎnshù'),
            this.$t('m.zhùcèshēnqǐnglǜ'),
            this.$t('m.shēnqǐngtōngguòlǜ'),
            this.$t('m.tōngguòfàngkuǎnlǜ'),
            this.$t('m.zhùcèfàngkuǎnlǜ'),
          ],
          key: [
            'currentDate',
            'appDownloadCount',
            'registerCount',
            'applyLoanCount',
            'applyLoanPassCount',
            'paySuccessCount',
            'registerDownloadRate',
            'loanPassRate',
            'payPassRate',
            'registerPayRate',
          ],
          data: this.userDataListSum,
          autoWidth: true,
          filename: this.$t('m.yònghùshùjùhuìzǒng')
        }
        const paramsSum = {
          title: [
            this.$t('m.dayTime'),
            this.$t('m.xiàzàicìshù'),
            this.$t('m.zhùcèshù'),
            this.$t('m.shēnqǐngshù'),
            this.$t('m.tōngguòshù'),
            this.$t('m.fàngkuǎnshù'),
            this.$t('m.zhùcèshēnqǐnglǜ'),
            this.$t('m.shēnqǐngtōngguòlǜ'),
            this.$t('m.tōngguòfàngkuǎnlǜ'),
            this.$t('m.zhùcèfàngkuǎnlǜ'),
          ],
          key: [
            'currentDate',
            'appDownloadCount',
            'registerCount',
            'applyLoanCount',
            'applyLoanPassCount',
            'paySuccessCount',
            'registerDownloadRate',
            'loanPassRate',
            'payPassRate',
            'registerPayRate',
          ],
          data: this.userDataList,
          autoWidth: true,
          filename: this.$t('m.měirìyònghùxiángqíng')
        }
        excel.export_array_to_excel(paramsSum)
        excel.export_array_to_excel(params)

      } else {
        this.$Message.info(this.$t('m.biǎogéshùjùbùnéngwéikōng'))
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../static/style.css";
@import "../../static/common.scss";
h3 {
  font-size: 16px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #222;
  height: 20px;
  padding-left: 8px;
  display: inline-block;
  margin-bottom: 20px;
  background: linear-gradient(
    to right,
    #2d8cf0 0%,
    #2d8cf0 3px,
    #f9f9f9 3px,
    #f9f9f9 100%
  );
}
.items {
  display: inline-block;
  // margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>